<template>
    <div class="supplier">
      <div class="btn-list">
        <el-button disabled @click="btnClick(BtnText.PRINT)">打印</el-button>
        <el-button :disabled="isNodeDisabled" @click="btnClick(BtnText.ADD_CLASSIFY)">增加分类</el-button>
        <el-button :disabled="isNodeDisabled" @click="btnClick(BtnText.UPDATE_CLASSIFY)">修改分类</el-button>
        <el-button :disabled="isNodeDisabled" @click="btnClick(BtnText.DEL_CLASSIFY)" type="danger">删除分类</el-button>
        <el-button :disabled="isNodeDisabled" @click="btnClick(BtnText.ADD)">增加</el-button>
        <el-button :disabled="isDisabled" @click="btnClick(BtnText.UPDATE)">修改</el-button>
        <el-button :disabled="isDisabled" @click="btnClick(BtnText.DELETE)" type="danger">删除</el-button>
        <el-button :disabled="isDisabled" @click="btnClick(BtnText.START)">启用</el-button>
        <el-button :disabled="isDisabled" @click="btnClick(BtnText.STOP)" type="danger">停用</el-button>
      </div>

      <div class="wrap">
        <div class="tree">
          <el-tree
              style="max-width: 600px"
              default-expand-all
              :data="treeData"
              :props="defaultProps"
              @node-click="handleNodeClick"
          />
        </div>

        <div class="table">
          <div class="table-wrap">
            <el-table
                ref="tableRef"
                highlight-current-row
                @current-change="handleCurrentChange"
                :data="tableData" style="width: 100%">
              <el-table-column v-for="column in tableColumnList" :prop="column.prop" :label="column.label"/>
            </el-table>
          </div>
        </div>
      </div>

      <update-dialog v-model="dialogVisible"></update-dialog>

      <classify-update-dialog v-model="classifyVisible"></classify-update-dialog>
    </div>
</template>

<script lang="ts" setup>
import { ref, computed } from "vue";
import { supplierList, tableColumnList, treeData} from "./mockData.ts";
import { BtnText, SupplierTableData } from '@/interface/supplier.ts'
import { TreeNode } from "@/interface/commonTypes.ts";
import { ElTable, ElMessageBox } from 'element-plus'
import updateDialog from "./component/updateDialog.vue";
import ClassifyUpdateDialog from "@/views/supplier/component/classifyUpdateDialog.vue";

defineOptions({
  // 命名当前组件
  name: "Supplier"
})

const defaultProps: { children: string; label: string } = {
  children: 'children',
  label: 'label',
}

// 当前选择的树节点
const currentNode = ref<TreeNode | null>(null);
// 左侧树操作按钮禁用状态
const isNodeDisabled = computed(() => {
  return !currentNode.value || !currentNode.value.label;
})
const handleNodeClick = (data: TreeNode) => {
  console.log(data)
  currentNode.value = data
}

const dialogVisible = ref(false);

const classifyVisible = ref(false);

// 按钮操作事件
const btnClick = (btnName: BtnText) => {
  console.log(`当前点击事件：${BtnText[btnName]}`)
  switch (btnName) {
    case BtnText.PRINT:
      break
    case BtnText.ADD_CLASSIFY:
      classifyVisible.value = true;
      break
    case BtnText.UPDATE_CLASSIFY:
      classifyVisible.value = true;
      break
    case BtnText.DEL_CLASSIFY:
      delClassify(() => {});
      break
    case BtnText.ADD:
      dialogVisible.value = true;
      break
    case BtnText.UPDATE:
      dialogVisible.value = true;
      break
    case BtnText.DELETE:
      delRow(() => {});
      break
    case BtnText.START:
      break
    case BtnText.STOP:
      break
    default:
      break
  }
}

const tableData = ref(supplierList)

// 当前选择的行数据
const currentRow = ref<SupplierTableData | null>(null)
// 表格的ref对象
const tableRef = ref<InstanceType<typeof ElTable>>()
// 表格操作按钮禁用状态
const isDisabled = computed(() => {
  return !currentRow.value
})

const handleCurrentChange = (row: SupplierTableData | null) => {
  currentRow.value = row
  tableRef.value?.setCurrentRow(row)
  console.log(`当前选择的行:`, row)
}

// 删除选中行
const delRow = (done: () => void) => {
    ElMessageBox.confirm('确认要删除该供应商吗?', '警告', {
      cancelButtonText: '取消',
      confirmButtonText: '确认',
      type: 'warning',
    })
      .then(() => {

        done()
      })
      .catch(() => {
        // catch error
      })
}

// 删除选中供应商分裂
const delClassify = (done: () => void) => {
  ElMessageBox.confirm('确认要删除该供应商分类吗?', '警告', {
    cancelButtonText: '取消',
    confirmButtonText: '确认',
    type: 'warning',
  })
    .then(() => {

      done()
    })
    .catch(() => {
      // catch error
    })
}

</script>

<style lang="scss" scoped>
.supplier {
 padding: 10px;
  .btn-list {
    padding: 0 10px 10px;
    button {
      cursor: pointer;
    }
  }

  .wrap {
    display: flex;
    justify-content: space-between;
    .tree {
      padding: 5px;
      width: 300px;
      border: 1px solid silver;
    }

    .table {
      width: calc(100% - 300px);
      border: 1px solid silver;
    }

  }

}
</style>
